<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TestController</title>
<script src="angular.js\angular.js">
</script>
</head>
<body ng-app="myApp">
<div  ng-controller="LoginController">
	<div>
		<label for="UID">UserName:</label>
		<input type="text" id="UID" ng-model="user.UID" placeholder="UserName"/>
	</div>
	<div>
		<label for="PWD">Password:</label>
		<input type="Password" id="PWD" ng-model="user.PWD" placeholder="Password"/>
	</div>
	<div>
		<input type="button" ng-click="Submit()" value="登陆" />
		<input type="button" ng-click="Reset()" value="重置" />
	</div>
	<hr/>
	<div>
		Your Username is:{{user.UID}}
	</div>
	<div>
		Your Password is:{{user.PWD}}
	</div>
</div>
<hr/>
<div ng-controller="TimeController">
	<h4>{{Time}}</h4>
	<h3>{{Time.now|date:'yyyy-MM-dd HH:mm:ss'}}</h3>
</div>
<script type="text/javascript">
/*
AngularJS允许我们使用angular.module()方法来声明/引用模块
这个方法接受两个参数时，创建模块，第一个是模块的名称，第二个是依赖列表，也就是可以被注入到模块中的对象列表。
接受一个参数时，引用模块，参数为模块名称
*/
//定义了一个叫myApp的模块，不依赖任何对象
angular.module('myApp', []);
//引用myApp模块
var myApp=angular.module('myApp');

//在myApp中注入控制器
myApp.controller('LoginController',function ($scope) {
	$scope.Submit=function(){
		var msg = "用户【"+$scope.user.UID+"】登陆成功！";
		alert(msg);
	};
	$scope.Reset=function(){
		$scope.user.UID="";
		$scope.user.PWD="";
	};
});

//在myApp中注入控制器
myApp.controller('TimeController',function ($scope){
	//初始化Time对象
	$scope.Time = {
		now: new Date()
	};
	
	var updateClock = function() {
		$scope.Time.now = new Date();
	};
	
	setInterval(function() {
		$scope.$apply(updateClock);
	}, 1000);
});

</script>
</body>
</html>